import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
            <div className="page-main-header">
                <img className="img1" src='webApp/images/bg2@2x.png'></img>
                <img className="img2" src='webApp/images/LOGO2@2x.png'></img>
                <img className="img3" src='webApp/images/xsksxt2@2x.png'></img>
            </div>
        )
    }
}

class Time extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rest: ""
        };
        this.timer = null;
        if (this.props.testInfo === undefined) {
            this.props.setTip('没有考卷信息');
        }
    }

    componentDidMount() {
        this.start = Date.now();
        this.range = 0;
        if (this.props.testInfo !== null) {
            this.getRest(Math.floor(this.props.testInfo.long_time));
        }
        this.props.onRef(this);
    }

    componentWillUnmount() {
        this.clearTimer(this.timer);
    }

    clearTimer = () => {
        clearTimeout(this.timer);
    }

    getRest = (duration) => {
        let rest = duration * 60;
        const f = () => {
            const hour = Math.floor(rest / 3600);
            const mins = Math.floor((rest - hour * 3600) / 60);
            const secs = rest - hour * 3600 - mins * 60;
            this.setState({
                rest: (hour < 10 ? '0' + hour : hour) + ':'
                    + (mins < 10 ? '0' + mins : mins) + ':'
                    + (secs < 10 ? '0' + secs : secs)
            });
            // eslint-disable-next-line no-plusplus
            this.end = Date.now();
            const gap = this.end - this.start;
            this.range += gap % 1000;
            rest -= Math.floor(gap / 1000);
            if (this.range / 1000 > 1) {
                rest -= Math.floor(this.range / 1000);
                this.range = this.range % 1000;
            }
            this.start = this.end;
            if (rest < 0) {
                // eslint-disable-next-line no-undef
                clearTimeout(this.timer);
                this.props.timeOut();
                return;
            }
            this.timer = setTimeout(f, 1000);
        }
        f();
    }

    render() {
        return (
            <div className="page-main-content-timer">
                <div className="page-main-content-timer-info">
                    <span>考试科目：{decodeURI(this.props.testInfo ? this.props.testInfo.subject_name : '')}</span>
                    <span>倒计时：{this.state.rest}</span>
                </div>
                <div onClick={() => this.props.changeSubmit()} className="page-main-content-timer-submit">交卷</div>
            </div>
        )
    }
}

class Title extends Component {
    render() {
        return (
            <div className="page-main-content-test-title">
                <div className="page-main-content-test-type">考试题型</div>
                <div className="page-main-content-test-score">共计：<span>{this.props.total}</span>分</div>
            </div>
        )
    }
}

class Back extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="page-main-content-test-inner-title">
                <div className="page-main-content-test-inner-reactangle-wrapper">
                    <div className="page-main-content-test-inner-reactangle" onClick={() => this.props.changePage(0)}></div>
                </div>
                <div>
                    <div className="page-main-content-test-inner-type">
                        {this.props.type + (this.props.type === '简答题' ? '(答案限制500字)' : '')} ({this.props.info.num}题)
                    </div>
                    <div className="page-main-content-test-inner-score">共计：<span>{this.props.info.score}</span>分</div>
                </div>
            </div>
        )
    }
}

class List extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page-main-content-type-list">
                {this.props.typeList === null ? null : this.props.pageArr.slice(1).map((v, i) => {
                    return (
                        <li key={v} onClick={() => this.props.changePage(i + 1)}>
                            <div className="page-main-content-type-item-wrapper">
                                <div className="page-main-content-type-list-type">{v}</div>
                                <div className="page-main-content-type-list-dash dash"></div>
                                <div className="page-main-content-type-list-score"><span>{this.props.typeList[v].score}</span>分</div>
                            </div>
                        </li>
                    )
                })}
            </div>
        )
    }
}

class Finish extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="page-main-content-test-finish">
                <img className="page-main-content-test-finish-img" src="webApp/images/submit@3x.png" />
                <div className="page-main-content-test-finish-info">试卷已提交</div>
                <div className="page-main-content-test-finish-thanksforcome">感谢您参与本次考试，期待您的精彩表现</div>
            </div>
        )
    }
}

class Button extends Component {
    render() {
        return (
            <li className={((this.props.res & (1 << (this.props.index % 31))) >> (this.props.index % 31) === 1) || this.props.current === this.props.index ? "is-selected" : ""}
                onClick={() => this.props.changeCurrent('btn-click', this.props.index)}
            >{this.props.index + 1}</li>
        )
    }
}

class Select extends Component {
    render() {
        return <img src={'webApp/images/' + (this.props.is_radio ? 'radio' : 'checkbox') + (this.props.is_selected ? '' : '-not') + '-selected.png'}
            onClick={() => this.props.changeAnswer(this.props.id)} />
    }
}

class Option extends Component {
    constructor(props) {
        super(props);
    }

    setAnswer = (id) => {
        const action = this.props.type;
        if (action === '单选题' || action === '判断题') {
            this.props.changeAnswers(1 << id);
        } else if (action === '多选题') {
            const answer = this.props.answer;
            if ((answer & (1 << id)) >> id === 1) {
                this.props.changeAnswers(answer & (~(1 << id)));
            } else {
                this.props.changeAnswers(answer | (1 << id))
            }
        }
        this.props.changeBtns(this.props.type);
    }

    render() {
        return this.props.options.map((v, i) => {
            return (
                <li key={i}>
                    <Select
                        id={i}
                        is_radio={this.props.type !== '多选题'}
                        is_selected={(this.props.answer & (1 << i)) >> i === 1}
                        changeAnswer={this.setAnswer}
                    ></Select>
                    <div className="page-main-content-test-inner-question-option">{v.option_id}:</div>
                    <div className="page-main-content-test-inner-question-value">{v.option_content}</div>
                </li>
            )
        })
    }
}

class Textarea extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
    }

    setValue = e => {
        this.props.changeAnswers(e.target.value.slice(0, 500));
        this.props.changeBtns(this.props.type);
    }

    render() {
        return (
            <textarea
                onChange={this.setValue}
                placeholder="请填写简单内容"
                className="page-main-content-test-inner-subjective"
                value={this.props.answer === 0 ? '' : this.props.answer}
            >
            </textarea>
        )
    }
}

class Question extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page-main-content-test-inner-question">
                <div className="page-main-content-test-inner-queston-content">
                    {this.props.current + 1 + '、' + this.props.questions[this.props.current].question_content}
                </div>
                <div className="page-main-content-test-inner-question-options">
                    {
                        // eslint-disable-next-line no-nested-ternary
                        this.props.type !== '简答题' ?
                            (this.props.options ? this.props.setTip('没有选项数据')
                                :
                                <Option
                                    answer={this.props.answers[this.props.current]}
                                    changeAnswers={this.props.changeAnswers}
                                    changeBtns={this.props.changeBtns}
                                    options={this.props.questions[this.props.current].options}
                                    type={this.props.type}
                                    current={this.props.current}
                                ></Option>
                            ) :
                            <Textarea
                                changeAnswers={this.props.changeAnswers}
                                changeBtns={this.props.changeBtns}
                                answer={this.props.answers[this.props.current]}
                            >
                            </Textarea>
                    }
                </div>
            </div>
        )
    }
}

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            inplode: true
        };
    }

    componentDidMount() {
        this.props.onRef(this);
    }

    setAnswers = (value) => {
        this.props.changeAnswerArr(this.props.type, value, this.state.current);
    }

    setBtns = () => {
        this.props.changeBtnArr(this.props.type, this.state.current);
    }

    setCurrent = (action, id) => {
        if (action !== 'next') {
            this.setState({
                current: id
            })
        } else {
            if (this.state.current < this.props.len - 1) {
                this.setState((pre) => {
                    return { current: pre.current + 1 };
                })
            } else {
                this.props.changePage(this.props.currentPage + 1);
                this.setState({
                    current: 0
                })
            }
        }
    }

    setInplode = () => {
        this.setState(
            (pre) => ({ inplode: !pre.inplode })
        )
    }

    render() {
        return (
            <div className="page-main-content-test-inner">
                <Back
                    changePage={this.props.changePage}
                    info={this.props.typeInfo}
                    type={this.props.type}
                >
                </Back>
                <div className={this.state.inplode ? "page-main-content-test-inner-buttons" : "page-main-content-test-inner-buttons explode"}>
                    {
                        new Array(this.props.len).fill(0).map((v, i) =>
                            <Button
                                key={i}
                                index={i}
                                res={this.props.btn[Math.floor(i / 31)]}
                                changeCurrent={this.setCurrent}
                                current={this.state.current}
                            >
                            </Button>
                        )
                    }
                </div>
                <div className="page-main-content-test-inner-dash dash">
                    {
                        this.props.len > 20 ?
                            <img
                                onClick={this.setInplode}
                                src={'webApp/images/' + (this.state.inplode ? 'in' : 'ex') + 'plode@2x.png'}
                            /> : null
                    }
                </div>
                <Question
                    type={this.props.type}
                    changeBtns={this.setBtns}
                    answers={this.props.answer}
                    changeAnswers={this.setAnswers}
                    current={this.state.current}
                    len={this.props.len}
                    questions={this.props.questions}
                    setTip={this.props.setTip}
                >
                </Question>
                {
                    this.props.lastPage === this.props.type && this.state.current === this.props.len - 1 ? null
                        :
                        <div
                            onClick={() => {
                                this.setCurrent('next');
                            }}
                            className="page-main-content-test-inner-btn"
                        >下一题</div>
                }
            </div>
        )
    }
}

export {
    Time,
    Header,
    Title,
    List,
    Test,
    Finish
}